.log-detail{
    display: flex;
    margin-top: 10px;
    .log-detail-left{
        width: 54%;
        background: #fff;
        padding:20px 20px 80px 20px;
    }
    .log-detail-right{
        width: 46%;
    }
}
.timeline{
    .timeline-item{
        display: flex;
        padding-right: 10px;
        &:first-child{
            .line{
                .line1{
                    border-color: transparent;
                }
            }
        }
        &:last-child{
            .line{
                .line2{
                    border-color: transparent;
                }
            }
        }
        .time{
            width: 130px;
            text-align: right;
            padding-right: 5px;
            flex-shrink: 0;
        }
        .line{
            width: 30px;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            .line1{
                height: 20px;
                width: 6px;
                border-right: 2px dotted #CCCCCC;
                margin-bottom: 1px;
            }
            .circle{
                width: 10px;
                height: 10px;
                border:1px solid #333333;
                border-radius:5px;
                position: relative;
                background: #f8f8f8;
                &:after{
                    content:'';
                    width: 4px;
                    height: 4px;
                    border-radius:2px;
                    background: #333;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            .line2{
                margin-top: 1px;
                display: block;
                width: 6px;
                flex-grow: 1;
                border-right: 2px dotted #CCCCCC;
            }
        }
        .content{
            flex-grow: 1;
            position: relative;
            padding-bottom: 10px;
            >div{
                background: #fff;
                border-radius:4px;
                padding:20px 10px;
                white-space: pre-wrap;
            }
            &:after{
                content: "";
                display: block;
                position: absolute;
                left: -10px;
                top: 15px;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid #fff;
            }
        }
    }
}